<template>
	<div>
		<div class="box">
			<scroll-view :scroll-x="true">
				<view class="">
					<div class="cell theader">
						<div class="cell-item"></div>
						<div class="cell-item">
							{{ details.carSourceType == '2' ? '上一次金额(年)' : '原金额（年）' }}
						</div>
						<div class="cell-item">本次金额（年）</div>
						<div class="cell-item">差价</div>
					</div>
					<uni-forms
						ref="form"
						:model="currentInfoData"
						validate-trigger="bind"
						label-width="auto">
						<div class="cell">
							<div class="cell-item">交强险</div>
							<FromItem
								v-if="details.carSourceType == '2'"
								:required="true"
								state="readonly"
								name="insuranceCompulsoryPrevAmount">
								<view class="cell-item">
									<AInput
										state="readonly"
										v-model="currentInfoData.insuranceCompulsoryPrevAmount"
										type="price"
										placeholder="请输入金额"></AInput>
								</view>
							</FromItem>
							<FromItem
								v-if="details.carSourceType != '2'"
								:required="true"
								state="readonly"
								name="insuranceCompulsoryQuondamAmount">
								<view class="cell-item">
									<AInput
										state="readonly"
										v-model="currentInfoData.insuranceCompulsoryQuondamAmount"
										type="price"
										placeholder="请输入金额"></AInput>
								</view>
							</FromItem>
							<FromItem
								:required="true"
								:state="state"
								:showRequiredIcon="false"
								name="insuranceCompulsoryCurrentAmount">
								<AInput
									:state="state"
									class="uni-input"
									size="mini"
									v-model="currentInfoData.insuranceCompulsoryCurrentAmount"
									type="price"
									placeholder="请输入金额"
									@change="input_1"></AInput>
							</FromItem>
							<FromItem
								:required="true"
								state="readonly"
								name="insuranceCompulsoryDiffAmount">
								<view class="cell-item">
									<AInput
										state="readonly"
										v-model="currentInfoData.insuranceCompulsoryDiffAmount"
										type="price"
										placeholder="请输入金额"></AInput>
								</view>
							</FromItem>
						</div>
						<div class="cell">
							<div class="cell-item">车船税</div>
							<FromItem
								v-if="details.carSourceType == '2'"
								:required="true"
								state="readonly"
								name="insuranceCarvesselPrevAmount">
								<view class="cell-item">
									<AInput
										state="readonly"
										v-model="currentInfoData.insuranceCarvesselPrevAmount"
										type="price"
										placeholder="请输入金额"></AInput>
								</view>
							</FromItem>
							<FromItem
								v-if="details.carSourceType != '2'"
								:required="true"
								state="readonly"
								name="insuranceCarvesselQuondamAmount">
								<view class="cell-item">
									<AInput
										state="readonly"
										v-model="currentInfoData.insuranceCarvesselQuondamAmount"
										type="price"
										placeholder="请输入金额"></AInput>
								</view>
							</FromItem>
							<FromItem
								:required="isGreen ? false : true"
								:state="
									state == 'readonly'
										? 'readonly'
										: isGreen
										? 'readonly'
										: 'write'
								"
								:showRequiredIcon="false"
								name="insuranceCarvesselCurrentAmount">
								<AInput
									:state="
										state == 'readonly'
											? 'readonly'
											: isGreen
											? 'readonly'
											: 'write'
									"
									class="uni-input"
									size="mini"
									v-model="currentInfoData.insuranceCarvesselCurrentAmount"
									type="price"
									placeholder="请输入金额"
									@change="input_2"></AInput>
							</FromItem>
							<FromItem
								:required="true"
								state="readonly"
								name="insuranceCarvesselDiffAmount">
								<view class="cell-item">
									<AInput
										state="readonly"
										v-model="currentInfoData.insuranceCarvesselDiffAmount"
										type="price"
										placeholder="请输入金额"></AInput>
								</view>
							</FromItem>
						</div>
						<div class="cell">
							<div>商业险</div>
							<FromItem
								v-if="details.carSourceType == '2'"
								:required="true"
								state="readonly"
								name="insuranceCommercialPrevAmount">
								<view class="cell-item">
									<AInput
										state="readonly"
										v-model="currentInfoData.insuranceCommercialPrevAmount"
										type="price"
										placeholder="请输入金额"></AInput>
								</view>
							</FromItem>
							<FromItem
								v-if="details.carSourceType != '2'"
								:required="true"
								state="readonly"
								name="insuranceCommercialQuondamAmount">
								<view class="cell-item">
									<AInput
										state="readonly"
										v-model="currentInfoData.insuranceCommercialQuondamAmount"
										type="price"
										placeholder="请输入金额"></AInput>
								</view>
							</FromItem>
							<FromItem
								:required="true"
								:state="state"
								:showRequiredIcon="false"
								name="insuranceCommercialCurrentAmount">
								<AInput
									:state="state"
									class="uni-input"
									size="mini"
									v-model="currentInfoData.insuranceCommercialCurrentAmount"
									type="price"
									placeholder="请输入金额"
									@change="input_3"></AInput>
							</FromItem>
							<FromItem
								:required="true"
								state="readonly"
								name="insuranceCommercialDiffAmount">
								<view class="cell-item">
									<AInput
										state="readonly"
										v-model="currentInfoData.insuranceCommercialDiffAmount"
										type="price"
										placeholder="请输入金额"></AInput>
								</view>
							</FromItem>
						</div>
					</uni-forms>
				</view>
			</scroll-view>

			<div>
				<uni-forms
					ref="form1"
					:model="currentInfoData"
					validate-trigger="bind"
					label-width="auto"
					label-position="top">
					<FromItem
						label="保险询价附件"
						:required="getIn"
						:state="state"
						name="insuranceConsultAccessory">
						<ImageCommon
							v-model="currentInfoData.insuranceConsultAccessory"
							:disabled="state !== 'write'"
							:upType="2"
							:maxCount="1"></ImageCommon>
					</FromItem>
				</uni-forms>
			</div>
		</div>
	</div>
</template>

<script>
	import * as app from '@/api/index.js';
	import * as apis from '@/api/quota/apply/api.js';
	import * as utils from '@/pages/quota/libs/utils.js';
	import FromItem from '../formItem/index.vue';
	import Upload from '@/components/lr-upload.vue';
	export default {
		name: '',
		components: { FromItem, Upload },
		dicts: [],
		props: {},
		inject: [
			'details_provide',
			'config_provide',
			'deptList_provide',
			'state_provide',
			'index_provide',
		],
		data() {
			return {};
		},
		computed: {
			details() {
				return this.details_provide();
			},
			config() {
				return this.config_provide();
			},
			deptList() {
				return this.deptList_provide();
			},
			state() {
				return this.state_provide();
			},
			index() {
				return this.index_provide();
			},
			currentInfoData() {
				return this.details.productList?.[this.index] ?? {};
			},
			insuranceCompulsoryDiffAmount_dif() {
				return utils.toNumberSub(
					this.currentInfoData?.insuranceCompulsoryQuondamAmount,
					this.details.carSourceType == '2'
						? this.currentInfoData?.insuranceCompulsoryPrevAmount
						: this.currentInfoData?.insuranceCompulsoryCurrentAmount,
				);
			},
			insuranceCarvesselDiffAmount_dif() {
				return utils.toNumberSub(
					this.currentInfoData?.insuranceCarvesselQuondamAmount,
					this.details.carSourceType == '2'
						? this.currentInfoData?.insuranceCarvesselPrevAmount
						: this.currentInfoData?.insuranceCarvesselCurrentAmount,
				);
			},
			insuranceCommercialDiffAmount_dif() {
				return utils.toNumberSub(
					this.currentInfoData?.insuranceCommercialQuondamAmount,
					this.details.carSourceType == '2'
						? this.currentInfoData?.insuranceCommercialPrevAmount
						: this.currentInfoData?.insuranceCommercialCurrentAmount,
				);
			},
			// 差价是否大于0
			getIn() {
				return (
					this.currentInfoData.insuranceCompulsoryDiffAmount > 0 ||
					this.currentInfoData.insuranceCarvesselDiffAmount > 0 ||
					this.currentInfoData.insuranceCommercialDiffAmount > 0
				);
			},
			isGreen() {
				return this.currentInfoData?.plan.isGreen == 1 ? true : false;
			},
		},
		watch: {
			insuranceCompulsoryDiffAmount_dif: {
				handler(val) {
					this.currentInfoData.insuranceCompulsoryDiffAmount = val;
				},
			},
			insuranceCarvesselDiffAmount_dif: {
				handler(val) {
					this.currentInfoData.insuranceCarvesselDiffAmount = val;
				},
			},
			insuranceCommercialDiffAmount_dif: {
				handler(val) {
					this.currentInfoData.insuranceCommercialDiffAmount = val;
				},
			},
		},
		filters: {},
		created() {},
		mounted() {},
		methods: {
			// 假如是新能源车
			setInsuranceCarvesselCurrentAmount() {
				this.currentInfoData.insuranceCarvesselQuondamAmount = 0;
				this.currentInfoData.insuranceCarvesselCurrentAmount = 0;
			},
			input_1() {
				if (this.notEmpty(this.currentInfoData.insuranceCompulsoryCurrentAmount)) {
					this.currentInfoData.planConf.insuranceCompulsoryCurrentAmount_state =
						'changed';
				} else {
					this.currentInfoData.planConf.insuranceCompulsoryCurrentAmount_state = '';
				}
			},
			input_2() {
				if (this.notEmpty(this.currentInfoData.insuranceCarvesselCurrentAmount)) {
					this.currentInfoData.planConf.insuranceCarvesselCurrentAmount_state = 'changed';
				} else {
					this.currentInfoData.planConf.insuranceCarvesselCurrentAmount_state = '';
				}
			},
			input_3() {
				if (this.notEmpty(this.currentInfoData.insuranceCommercialCurrentAmount)) {
					this.currentInfoData.planConf.insuranceCommercialCurrentAmount_state =
						'changed';
				} else {
					this.currentInfoData.planConf.insuranceCommercialCurrentAmount_state = '';
				}
			},
		},
		beforeDestroy() {
			if (this.notEmpty(this.details?.productList?.[this.index])) {
				this._resetFields([
					{
						data: this.currentInfoData,
					},
					{
						ref: 'form1',
						data: this.currentInfoData,
					},
				]);
			}
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		// margin: 20rpx;
		// padding: 20rpx;
		padding-top: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;
		.title {
			border-bottom: 1px solid #e9e9e9;
			font-weight: 500;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;
		}
	}
	.theader {
		.cell-item {
			padding: 20rpx 0;
		}
	}
	.cell {
		display: grid;
		grid-template-columns: 100rpx minmax(200rpx, 1fr) minmax(200rpx, 1fr) minmax(200rpx, 1fr);
		place-items: center;
		padding: 15rpx 0;
		.cell-item {
			min-width: 0;
		}
	}
</style>
